<template>
  <div class="page">
    <div class="layui-fluid">
      <div class="layui-row layui-col-space15">
        <div class="layui-col-md12">
          <div class="layui-card">
            <div class="layui-card-body">
              <div class="layui-form" lay-filter='djlist' style="font-size:15px;">
                  <div class="layui-form-item">
                    <div class="layui-inline">
                      <label class="layui-form-label">名称</label>
                      <div class="layui-input-inline">
                        <input
                          type="text"
                          name="name"
                          v-model="itemData.name"
                          placeholder
                          autocomplete="off"
                          class="layui-input"
                        />
                      </div>
                    </div>
                  </div>
									<div class="layui-form-item" v-if="id==''">
                    <div class="layui-inline">
                      <label class="layui-form-label">路径</label>
                      <div class="layui-input-inline">
                        <input
                          type="text"
                          name="name"
                          v-model="itemData.url"
                          placeholder
                          autocomplete="off"
                          class="layui-input"
                        />
                      </div>
                    </div>
                  </div>
								  
								  <div class="layui-form-item">
                    <div class="layui-inline">
                      <label class="layui-form-label">排序</label>
                      <div class="layui-input-inline">
                        <input
                          type="text"
                          name="name"
                          v-model="itemData.rank"
                          placeholder
                          autocomplete="off"
                          class="layui-input"
                        />
                      </div>
                    </div>
                  </div>
									
                  <div class="layui-form-item">
	                  <label class="layui-form-label">状态</label>
	                  <div class="layui-input-inline">
	                    <select name="status" lay-filter="status" v-model="itemData.status">
	                      <option value="ENABLE">启用</option>
	                      <option value="DISABLE">禁用</option>
	                    </select>
	                  </div>
	                </div>

                  <div class="layui-form-item">
                      <div class="layui-inline">
                        <label class="layui-form-label">logo</label>
                        <div class="layui-input-inline" style="width: 180px;">
                          <div class="layui-upload">
                            <button
                              type="button"
                              class="layui-btn"
                              id="layuiadmin-upload-useradmin"
                            >选择文件</button>
                          </div>
                        </div>
                      </div>
                    </div>
                    <div class="layui-form-item">
                      <div class="layui-inline">
                        <label class="layui-form-label">图片预览</label>
                        <div class="layui-input-inline" style="width: 180px;">
                          <img
                            id="img"
                            :src="
                        itemData.logo
                          ? itemData.logo
                          : require('@/assets/zwyl.jpg')
                      "
                            style="width:100px;height:100px;"
                          />
                        </div>
                      </div>
                    </div>
                </div>
                
                <div class="layui-form-item">
                      <div class="layui-inline">
                        <label class="layui-form-label">选中状态图片</label>
                        <div class="layui-input-inline" style="width: 180px;">
                          <div class="layui-upload">
                            <button
                              type="button"
                              class="layui-btn"
                              id="layuiadmin-upload-useradmin1"
                            >选择文件</button>
                          </div>
                        </div>
                      </div>
                    </div>
                    <div class="layui-form-item" v-if="itemData.type==3">
                      <div class="layui-inline">
                        <label class="layui-form-label">图片预览</label>
                        <div class="layui-input-inline" style="width: 180px;">
                          <img
                            id="img"
                            :src="
                        itemData.checkedLogo
                          ? itemData.checkedLogo
                          : require('@/assets/zwyl.jpg')
                      "
                            style="width:100px;height:100px;"
                          />
                        </div>
                      </div>
                    </div>
                </div>
                <div class="layui-form-item">
                   <div class="layui-inline">
                   		<label class="layui-form-label"></label>
                   		<div class="layui-input-inline">
                    		<button class="layui-btn layui-btn-normal" @click="confirmOk()">保存设置</button>
                    	</div>
                    </div>
                  </div>
                </div>
              </div>

              
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>
<script>
import Pagetop from "../../common/pagetop.vue";
import Secondnav from "../../common/secondnav.vue";
import Vue from "vue";
export default {
  name: "storedit",
  components: { Pagetop, Secondnav },
  data() {
    return {
      id: "",
      typeid:'',
      itemData: {
        rank : "",
        url :'',
        logo: "",
        name: "",
        status:"ENABLE",
        type:2,
        checkedLogo:''
      },
    };
  },
  mounted() {
    var _this = this;
    window.getdata = this.getdata;
    layui.use(["upload", "element"], function () {
      var upload = layui.upload;
      var element = layui.element;
     var uploadInst = upload.render({
        elem: "#layuiadmin-upload-useradmin", //绑定元素
        data: {
          type: 2,
        },
        url: imguploadurl, //上传接口
        done: function (res) {
          layer.msg("上传成功");
          _this.itemData.logo = res.msg;
        },
        error: function () {
          layer.msg("上传失败");
        },
      });
      upload.render({
        elem: "#layuiadmin-upload-useradmin1", //绑定元素
        data: {
          type: 2,
        },
        url:imguploadurl, //上传接口
        done: function (res) {
          layer.msg("上传成功");
          _this.itemData.checkedLogo = res.msg;
        },
        error: function () {
          layer.msg("上传失败");
        },
      });
    });
    
  },
  methods: {
    getdata: function (date) {
      var _this = this;
      if(date){
	      var url = "/advert/aapi/v1.9/part/"+date.id;
	      url=dourl(url)
	      ajaxRequest(url, "GET", "json", "", function (ret, err) {
	      	_this.itemData = ret.data
	      	_this.id=date.id
		    });
		  }
      else{
      	
      }
    },
    
    confirmOk: function () {
      var _this = this;
      var dates = _this.itemData;
      if(_this.id){
      	dates.id = _this.id
      	var method='PUT'
      }
      else{
      	var method='POST'
      }
      var url = "/advert/aapi/v1.9/part";
      url=dourl(url)
      ajaxRequest(url, method, "json", dates, function (ret, err) {
        layer.msg("操作成功");
        setTimeout(function () {
          var index = parent.layer.getFrameIndex(window.name);
          parent.layer.close(index);
          parent.location.reload();
        }, 1000);
      });
    },
    
  },

  updated: function () {
    var _this = this;
    layui.use("form", function () {
      var form = layui.form;
      form.render();
      form.on("select(status)", function (data) {
      		_this.itemData.status=data.value
      })
    });
  },
};
</script>
<style>
.uploader-list {
  margin-left: -15px;
}

.uploader-list .li {
  position: relative;
  width: 100px;
  height: 100px;
  display: inline-block;
  margin-left: 15px;
}

.li .mapimg {
  width: 100px;
  height: 100px;
  position: absolute;
}
.li .close {
  position: relative;
  width: 15px;
  left: 8px;
  bottom: 10px;
  float: right;
  z-index: 1000;
}
</style>
